<template>
  <!-- 课程资料 -->
  <div class="qy-com-data-list">
    <div class="file-wrap flex-wrap flex-text-mid" v-for="(item, index) in list" :key="index" @click="viewFile(item)">
      <div class="file-icon" :class="transFileType(item)"></div>
      <div class="file-content flex-wrap space-between flex-text-mid">
        <p class="top-left ellipsis">{{ item.fileName }}</p>
        <div class="btn-wrap">
          <button class="btn">查看</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {transFileType, getFileSufixName} from '@/assets/js/util'

export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
  },
  methods: {
    transFileType(item) {
      let suffix = item.fileName.substring(item.fileName.lastIndexOf("."));
      return transFileType(item.type, suffix)

    },


    viewFile(item) {
      /*if (this.type === 3) {
        this.$api.knowledge.clickDoc({ docId: item.docId })
      }*/
      this.$uniPush({
        name: 'file-type-id', params: {
          type: 4,
          id: item.storageId
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/static/css/variable.scss';

.qy-com-data-list {
  padding: 15px 0;

  .file-wrap {
    padding: 15px 0;
    align-items: center;

    .file-icon {
      width: 15%;
    }

    .file-content {
      width: 85%;
      margin-left: 5px;
      font-size: 14px;
      margin-bottom: 3px;

      .top-left {
        width: 80%;
        font-weight: 400;
        line-height: 20px;
        white-space: pre-wrap;
      }

      .btn-wrap {
        width: 20%;

        .btn {
          width: 60px;
          height: 28px;
          border-radius: 20px;
          border: 1px solid var(--color);
          color: var(--color);
          background-color: #fff;
        }
      }
    }
  }
}
</style>
